<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>

  <body>
    <template id="messages">
      <x-message snapshot-ignore>
```javascript
console.log('JavaScript code block using tripple ` delimiters');
```
----
    Code block using indent
    also has copy button
    but no highlighting</x-message>
    <x-message>
```javascript
export default function JavaScript(is, supported) { using shiki; }
```
```typescript
export default type TypeScript = (is, supported): { using: shiki; }
```
```python
def Python(is_supported): return {'using': 'shiki'}
```
    </x-message>
    </template>
    <main id="webchat"></main>
    <script>
      run(async function () {
        const {
          WebChat: { renderWebChat, testIds }
        } = window; // Imports in UMD fashion.

        const { directLine, store } = testHelpers.createDirectLineEmulator();

        const params = new URLSearchParams(location.search);

        renderWebChat({
          directLine,
          store,
          styleOptions: {
            codeBlockTheme: params.get('code-block-theme') ?? 'github-light-default'
          }
        }, document.getElementById('webchat'));

        await pageConditions.uiConnected();

        /** @type {HTMLElement[]} */
        const messages = Array.from(window.messages.content.querySelectorAll('x-message'))
        for (const message of messages) {
          await directLine.emulateIncomingActivity({
            text: message.innerText,
            type: 'message'
          });
          if (!message.hasAttribute('snapshot-ignore')) {
            await host.snapshot('local');
          }
          await pageConditions.numActivitiesShown(messages.indexOf(message) + 1);
        }
      });
    </script>
  </body>
</html>
